<template>
  <div class="info-bar">
    <div class="avatar-container">
      <el-avatar class="avatar" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
      <el-button class="my-2" icon="Bell" type="primary" @click="sendMessage">发送消息</el-button>
    </div>
    <div class="info-content">
      <div class="name">姓名：{{ state.patientName }}</div>
      <div class="patient-type">性别：{{ state.sex }}</div>
      <div class="birthday">出生日期：{{state.birthday}}</div>
      <div class="nationality">身份证号：{{ state.identificationNumber }}</div>
      <div class="marital-status">体力状态：{{ state.physicalStrength }}</div>
      <div class="contact-number">联系电话：{{ state.phoneNumber }}</div>
    </div>
    <message-dialog ref="messageDialogRef" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onMounted } from 'vue';
import { getPatientBaseInfo } from '/@/api/patient/patientBase';
import { useMessage } from '/@/hooks/message';

const MessageDialog = defineAsyncComponent(() => import('../components/sendMessage.vue'));
const messageDialogRef = ref()

const state = ref({
  patientName: '',
  birthday: '',
  identificationNumber: '',
  patientUid: '',
  phoneNumber: '',
  physicalStrength: '',
  sex: '',
  username: '',
  wxUid: ''
})

const props = defineProps<{
  patientUid: string
  doctorUid: string | null
}>();

const sendMessage = () => {
  if (props.doctorUid == null)
  {
    useMessage().error("仅医生用户可发送消息");
    return;
  }
  messageDialogRef.value.openDialog({
    doctorUid: props.doctorUid,
    patientUid: props.patientUid,
  });
}

onMounted(async () => {
  // 每次进入访问对应患者信息的基础信息
  const res = await getPatientBaseInfo(props.patientUid);
  state.value = res.data;
})
</script>

<style scoped>
.info {
	margin-left: 8px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.info-bar {
  display: flex;
  align-items: flex-start;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ebeef5;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
}

.info-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-left: 10px;
  justify-items: center;
}

.info-content div {
  margin-bottom: 5px;
}
</style>